<template>
  <view class="contenter">
    <view class="top">
      <view class="u-flex flex_bt">
        <view class="lable">预约门店</view>
        <view class="name">{{data.store_name}}</view>
      </view>
      <view class="u-flex flex_bt">
        <view class="lable">用户姓名</view>
        <view class="name">{{data.user.nickname}}</view>
      </view>
      <view class="u-flex flex_bt">
        <view class="lable">用户电话</view>
        <view class="name">{{data.user.mobile}}</view>
      </view>
    </view>


    <view class="content">
      <view class="h5 u-flex">项目名称：</view>
      <view class="con flex" v-for="(item,index) in data.service">
        <item-image :img="item.image" :height="200" :width="200"></item-image>
        <view class="flex_bt flex-column detail flex">
          <view class="name">{{item.sname}}</view>
          <view class="cona two-line-ellipsis">{{item.intro}}</view>
          <view class="flex_bt u-flex">
            <view class="num"></view>
            <view class="price">剩余{{item.num}}次</view>
          </view>
        </view>
      </view>
      <view class="time u-flex flex_bt" @click="changeTime">
        <view>预约时间</view>
        <view class="u-flex">
          <view class="shi">{{data.date}}</view>
          <view>
            <u-icon name="arrow-right"  color="#ACACAC" size="21"></u-icon>
          </view>
        </view>
      </view>

    </view>
    <view class="view2" style="margin-top: 30rpx;margin-bottom: 50rpx;">
      <view class="view2_title flex-r-s-c">
        <text>服务技师：</text>
      </view>
      <view class="flex-r-s-c"  v-for="(v,i) in data.tec" :key='i'>
        <view class="flex-r-b-c" style="width: 100%;padding: 20rpx;">
          <view class="flex-r-s-c">
            <text style="color: #959595;font-size: 24rpx;">{{v.tname}}</text>
            <text :style="{color:v.type===0?'#959595':'#45806E',fontSize:'24rpx'}">{{v.type===0?'(系统分配)':'(自主选择)'}}</text>
          </view>
          <text style="font-size: 32rpx;color: #333333;font-weight: 600;">{{v.name}}</text>
        </view>
      </view>
    </view>
    <view class="bt" @click="xiadan">确认预约</view>
    <modal-item v-if="show" :item="'预约成功，请提醒客户按时进行下次服务'" @submit="submit" @close="close()"></modal-item>
  </view>
</template>

<script>
import ModalItem from "../../components/item/modalItem";
export default {
  name: "index",
  components: {ModalItem},
  data(){
    return{
      option:{},
      show:false,
      data: {},
    }
  },
  onShow(){
    if(uni.getStorageSync('time')){
      this.data.date = uni.getStorageSync('time')
    }
  },
  onLoad(option){
    this.data = JSON.parse(option.data)
    this.data.mobile = this.phone(this.data.mobile)
  },
  methods:{
    //回到首页
    submit(){
      uni.switchTab({
        url:'/pages/store/index',
      })
    },
    // 下單
    xiadan(){

      this.$api.serverSubmit({id:this.data.id,date:this.data.date||''}).then(res=>{
        this.show = true
        uni.removeStorage({
          key: 'time',
          success: function (res) {
          }
        });
      })
    },
    close(){
      this.show = false
    },
    //选择时间
    changeTime(){
      this.$u.route({
        url:'/pagesA/changeTime/index',
        params: {
          type: 1,
        }
      })
    },
  },
}
</script>

<style scoped lang="scss">
  .top{
    background: white;
    .u-flex{
      height: 102rpx;
      border-top: 2rpx solid $uni-border-color;
      padding: 0 40rpx;
      .lable{
        font-size: 28rpx;
        color: #000000;
      }
      .name{
        font-size: 32rpx;
        color: #333333;
      }
    }
  }
  .content{
    min-height: 400rpx;
    background: white;
    border-radius: 12rpx;
    margin: 20rpx 32rpx;
    .h5{
      height: 74rpx;
      padding: 0 20rpx;
      color: $uni-color-primary;
      font-size: 28rpx;
      border-bottom: 2rpx solid $uni-border-color;
    }
    .con{
      padding: 20rpx;
      border-bottom: 2rpx solid $uni-border-color;
    }
    .detail{
      margin-left: 20rpx;
      width: 424rpx;

    }
    .name{
      font-size: 36rpx;
      font-weight: bold;
      color: #3B3B3B;
    }
    .cona{
      font-size: 28rpx;
      color: #3B3B3B;
    }
    .price{
      color: $uni-color-price;
      font-size: 28rpx;
    }
    .time{
      color: #5C5C5C;
      font-size: 28rpx;
      padding: 0 20rpx;
      height: 80rpx;
      .shi{
        margin-right: 10rpx;
      }
    }
  }
  .bt{
    margin-top: 60rpx;
  }
  .view1 {
    padding: 20rpx 32rpx;


  }
  .view2 {
    border-radius: 12rpx;
    width: 686rpx;
    margin: 20rpx 32rpx;
    background: #FFFFFF;
    opacity: 1;
    overflow: hidden;
    .view2_title {
      border-bottom: 1rpx solid #F2F2F2;
      height: 74rpx;
      padding: 0px 20rpx;

      text {
        font-size: 28rpx;
        font-weight: bold;
        color: #0F4C3A;
      }
    }
  }
</style>